import {
  StyleProp, Text, TextStyle, View,
} from 'react-native'
import Portal from '@COMPONENTS/portal'
import React from 'react'
import Modal from '@COMPONENTS/modal/Modal'
import EStyleSheet from 'react-native-extended-stylesheet'
import Button from '@COMPONENTS/button/Button'
import { CallbackOnBackHandler } from '@COMPONENTS/modal/ModalView'

interface DialogProps {
  title?: string
  content: string | React.ReactNode,
  contentStyle?: StyleProp<TextStyle>
  cancelText?: string
  confirmText?: string
  onCancel?: ()=>void
  onConfirm?: ()=> void
  onRequestClose?: CallbackOnBackHandler
  maskClosable?: boolean
}

const DialogContainer: React.FC<DialogProps> = ({
  title,
  content,
  cancelText = '取消',
  onCancel,
  onConfirm,
  contentStyle,
  confirmText = '确定',
  onRequestClose,
  maskClosable = false,
}) => {
  return (
    <Modal
      visible
      animationType="fade"
      maskClosable={maskClosable}
      onClose={onCancel}
      onRequestClose={onRequestClose}
    >
      <View style={styles.container}>
        {!!title && <Text style={styles.title}>{title}</Text>}
        <Text style={[styles.content, contentStyle]}>{content}</Text>
        <View style={styles.bottomContainer}>
          <Button style={styles.leftButton} onPress={onCancel}>
            <Text style={styles.leftText} numberOfLines={1}>
              {cancelText}
            </Text>
          </Button>
          <View style={styles.verticalLine} />
          <Button style={styles.rightButton} onPress={onConfirm}>
            <Text style={styles.rightText} numberOfLines={1}>
              {confirmText}
            </Text>
          </Button>
        </View>
      </View>
    </Modal>
  )
}

export default {
  show: (props: DialogProps & { autoRemove?: boolean }) => {
    const {
      onConfirm, onCancel, autoRemove = true, maskClosable = false,
    } = props || {}
    const key = Portal.add(
      <DialogContainer
        {...props}
        onConfirm={() => {
          onConfirm?.()
          if (autoRemove) {
            Portal.remove(key)
          }
        }}
        onRequestClose={() => {
          if (!maskClosable) return true
          Portal.remove(key)
          return true
        }}
        onCancel={() => {
          onCancel?.()
          Portal.remove(key)
        }}
      />,
    )
    return key
  },
  remove: (key: number) => {
    Portal.remove(key)
  },
}

const styles = EStyleSheet.create({
  container: {
    width: 295,
    backgroundColor: '$white',
    borderRadius: 12,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    marginTop: 20,
    fontSize: 20,
    fontFamily: 'PingFangSC-Semibold',
    color: '$fontColor',
    fontWeight: 'bold',
  },
  content: {
    fontSize: 14,
    marginTop: 6,
    marginBottom: 20,
    fontFamily: 'PingFangSC-Regular',
    color: '$fontColor',
  },
  bottomContainer: {
    borderTopColor: '$borderColor',
    borderTopWidth: 1,
    flexDirection: 'row',
  },
  verticalLine: {
    backgroundColor: '$borderColor',
    width: 1,
    alignSelf: 'stretch',
  },
  leftButton: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 15,
  },
  leftText: {
    fontFamily: 'PingFangSC-Regular',
    color: '$fontColor',
    fontSize: 16,
    textAlign: 'center',
  },
  rightButton: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 15,
  },
  rightText: {
    fontFamily: 'PingFangSC-Regular',
    color: '$fontColor',
    fontSize: 16,
    textAlign: 'center',
  },
})
